<!-- 单商品特价首页 -->
<template>
	<view class="page">
		<status-bar :title='title' :goHome='fromShare'></status-bar>
		<!-- 返回顶部 -->
		<backTop v-if='toTop'></backTop>
		<!-- 商品信息 start -->
		<!-- 分享 -->
		<view class="shareBox" v-show='!showShare' @click="showShare=true">
			<image :src="staticUrl+'/images/cat.gif'" mode=""></image>
		</view>
		<view class="goods_info">
			<view class="top_oper" :style="{top: 'calc(100rpx + '+navHeight+System.statusBarHeight + 'px)'}">
				<!-- 分销模式 -->
				<button v-if="mode != 0" :class="{shareAni:showShare,hideAni:!showShare}"
				 @click="toOrderList('/moneyPage/capital/myMoney')" class="thmeBg top_oper_item money share_btn" :style="{'--color': color}">
					<image :src="staticUrl+'/images/money_ico.png'" mode="aspectFit"></image>
				</button>
				<!-- 普通模式 -->
				<button :class="{shareAni1:showShare,hideAni1:!showShare}"
				 @click="toOrderList('share')" class="thmeBg top_oper_item money share_btn" :style="{'--color': color}">
					<image :src="staticUrl+'/images/share_ico.png'" mode="aspectFit"></image>
				</button>
			</view>
			<!-- 顶部操作 end -->
			<view class="goods_swiper">
				<view class="goods_v_btn" @click="videoIsShow=!videoIsShow" v-if='pageData.goods_video'>
					<image :src="staticUrl+'/images/play_ico1.png'" class="play_video" mode="aspectFit"></image>
					<!-- <text class="video_time">00'00"</text> -->
				</view>
				<view class="goods_video" v-if="videoIsShow">
					<video id="goods_video" ref="goods_video" :autoplay='true' webkit-playsinline="true" x5-video-player-type="h5-page"
					 x5-video-player-fullscreen="true" playsinline preload="auto" :show-fullscreen-btn='false' :controls="false" :src="pageData.goods_video"></video>
					<view class="cross_btn close_goods_video" @click="videoIsShow=!videoIsShow">
						<image :src="staticUrl+'/images/cross_ico.png'" class="cross_btn_video" mode="aspectFit"></image>
					</view>
				</view>
				<view class="goods_swiper_list swiper-container" v-else>
					<view class="swiper-pagination pagination goods_swiper_pagination" v-if='pageData.act_photo'>{{positions}} /
						{{pageData.act_photo.length}}</view>
					<swiper class="swiper__main" autoplay="true" circular="true" interval="3000" duration="500" @change="numFunc">
						<block v-if="pageData.act_photo">
							<swiper-item class="swiper__cell" v-for="(item,index) in pageData.act_photo" :key="index">
								<image class="swiper__img" @click="previewimages(index,pageData.act_photo)" :src="imgUrl+item" mode="aspectFill"></image>
							</swiper-item>
						</block>
					</swiper>
				</view>
			</view>
			
			
			<!--show_time:1 要显示时间和判断活动的开始结束   goods_state：活动状态 2未开始 1进行中 0已结束-->
			<template v-if='pageData.show_time == 1'>
				<view class="timing activity_timing" data-time="172800" v-if='pageData.goods_state == 1 || pageData.goods_state == 2'>
					<view class="timing_text" v-if='pageData.goods_state == 1'>距离活动结束还剩：</view>
					<view class="timing_text" v-if='pageData.goods_state == 2'>距离活动开始还有：</view>
					<view class="timing_c">
						<text class="timing_day" v-if='days > 0'>{{days}}天</text>
						<text class="timing_h">{{hours}}</text>:
						<text class="timing_i">{{minutes}}</text>:
						<text class="timing_s">{{seconds}}</text>
					</view>
				</view>
				<view class="statebar color2" v-if="pageData.goods_state == 0">活动已结束</view>
			</template>
			
			
			<view class="goods_text_info">
				<view class="goods_text_price flex-box align-center">
					<text class="price2_num myPrice">{{pageData.goods_price}}</text>
					<view class="flex">
						<text v-if='parseFloat(pageData.goods_full_price) != parseFloat(pageData.goods_price)'>
							{{pageData.goods_full_price_name}}: {{pageData.goods_full_price}}
						</text>
					</view>
					<view class="goods_text_tip" v-if="pageData.profitTitle">{{pageData.profitTitle}}</view>
				</view>
				<!-- <view v-if='pageData.express' style="padding: 0 20rpx 10rpx;color: #999999;">
					运费：{{parseFloat(pageData.express)>0?pageData.express:'免运费'}}
				</view> -->
				<view class="goods_text_t" v-if='pageData.goods_name'>
					<text class="tag color2" v-if='pageData.goods_type == 2'>团购</text>&nbsp;{{pageData.goods_name}}
				</view>
				<view class="goods_text_depict" v-if='pageData.goods_info'>{{pageData.goods_info}}</view>
			</view>
			
			<view class="goods_visitor" v-if='pageData.show_browse == 1'>
				<view class="goods_visitor_info">
					<view>最近浏览</view>
					<view class="goods_visitor_num">已有{{pageData.count?pageData.count:1}}人/次浏览</view>
				</view>
				<view class="goods_visitor_list">
					<view class="g_v_list_box" v-if='pageData.v_headimg && pageData.v_headimg.headimg.length > 0'>
						<image @error="list=''" v-for="(list,i) in pageData.v_headimg.headimg" :key="i" v-if='list' :src="list?list:staticUrl+'/images/imageLoading.png'" mode="aspectFit" class="g_v_avatar"></image>
					</view>
				</view>
			</view>
			
			<view class="goods_c">
				<mp-html :content="pageData.goods_content" lazy-load scroll-table selectable use-anchor show-with-animation/>
			</view>
		</view>
		<!-- 商品信息 end -->
		<!-- 底部按钮 start -->
		<view class="footer_btn_box" v-if="pageData.act_join_act == 1">
			<navigator url="/activityPage/join/i_join" class="btn2">我要加入</navigator>
		</view>
		<!-- 底部按钮 end -->
		<!-- 底部信息 start -->
		<view class="footer_info">
			<view class="ftr_info_list">
				<view class="ftr_info_item info">
					<navigator url="/userPage/user/introduce" hover-class="none">
						<view class="ftr_info_ico">
							<text class="iconfont icon-qiyejianjie"></text>
						</view>
						<view class="ftr_info_t">简介</view>
					</navigator>
				</view>
				<view class="ftr_info_item serve" style="position: relative;">
					<view @click="contact">
						<view class="ftr_info_ico">
							<text class="iconfont icon-conversation_icon"></text>
						</view>
						<view class="ftr_info_t">客服</view>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<button open-type="contact" bindcontact="handleContact" class="btn-contact" v-if='service_state != 1'></button>
					<!-- #endif -->
				</view>
				<view @click="toOrderList('/pages/index/orderList')" class="ftr_info_item order">
					<view class="ftr_info_ico">
						<text class="iconfont icon-dingdan"></text>
					</view>
					<view class="ftr_info_t">订单</view>
				</view>
			</view>

			<view class="ftr_info_oper">
				<view class="ftr_info_oper_item r oBtn" style="padding: 0;" v-if="pageData.goods_state ==1">
					<view class="ftr_info_oper_item_c btnBox" >
						<view class="addBuy" @click="viewIsShow(2,pageData.goods_state)">
							<view style="margin-top: 6upx;"><text class="ftr_info_oper_price_num myPrice">{{pageData.goods_price}}</text></view>
							<view style="font-size: 20upx;">{{pageData.goods_price_name?pageData.goods_price_name:'立即购买'}}</view>
						</view>
					</view>
				</view>
				<!-- 活动已结束 -->
				<view class="ftr_info_oper_item r oBtn" style="padding: 0;background-color: #DDDDDD;"  @click="viewIsShow(-1,0)" v-if="pageData.goods_state==0" >
					<view class="ftr_info_oper_item_c btnBox" >
						<view class="addBuy flex-box align-center flex-center">
							<view style="font-size: 32upx;">活动已结束</view>
						</view>
					</view>
				</view>
				<!-- 活动未开始 -->
				<view class="ftr_info_oper_item r oBtn" style="padding: 0;background-color: #ffa04b;" @click="viewIsShow(-1,2)" v-if="pageData.goods_state==2" >
					<view class="ftr_info_oper_item_c btnBox" >
						<view class="addBuy flex-box align-center flex-center">
							<view style="font-size: 32upx;">活动未开始</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部信息 end -->
		<!-- 底部购买信息 start -->
		<view class="ftr_buy_info" v-show="isShow" style="z-index: 3335;">
			<view class="cross_btn close_buy_info" @click="viewIsShow">
				<image :src="staticUrl+'/images/cross_ico.png'" class="closeBottomBox" mode="aspectFit"></image>
			</view>
			<view class="ftr_buy_info_goods flex-box">
				<view class="ftr_buy_info_goods_thumb" onclick="$('.full_atlas').show();">
					<image :src="imgUrl+pageData.goods_img" mode="aspectFill"></image>
				</view>
				<view class="ftr_buy_info_goods_info flex">
					<text class="goods_titles" v-if='pageData.goods_name'>{{pageData.goods_name}}</text>
					<view class="ftr_buy_info_goods_price">
						<view>
							<p class="price2">￥<text class="price2_num">{{pageData.goods_price}}</text></p>
						</view>
						<view v-if='parseFloat(pageData.goods_price) != parseFloat(pageData.goods_full_price)'>
							<!-- {{pageData.goods_full_price_name}}： -->
							<text class="td_lt">￥{{pageData.goods_full_price}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="ftr_buy_info_oper">
				<view class="ftr_buy_info_oper_h">数量</view>
				<view class="ftr_buy_info_oper_num">
					<view class="ftr_buy_info_oper_btn minus disabled" data-type="minus">
						<image :src="staticUrl+'/images/minus_ico.png'" v-if="v_input < 2" class="minusBottomBox" mode="aspectFit"></image>
						<image :src="staticUrl+'/images/minus2_ico.png'" v-else @click="minus" class="minusBottomBox" mode="aspectFit"></image>
					</view>
					<input type="number" name="" v-model="v_input" class="ftr_buy_info_oper_input" />
					<view class="ftr_buy_info_oper_btn plus" data-type="plus">
						<image :src="staticUrl+'/images/plus2_ico.png'" class="minusBottomBox" @click="plus" mode="aspectFit"></image>
					</view>
				</view>
			</view>
			<view class="btn3" @click="submitdoods">确定</view>
		</view>
		<view class="mask" @click="viewIsShow" style="z-index: 3333;" v-show="isShow"></view>
		
		<showModel @cancelFunc='showModal=false' goHome='0' v-if='showModal' type='2'></showModel>
		<!-- 分享海报 -->
		<SharePoster v-if='showShareQr' :myid='actid' type='3' :pageType='"7&act_id="+actid' @closePoster='showShareQr=false'></SharePoster>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import SharePoster from "../../components/sharePoster.vue"
	var _setInterval = null,that;
	import API from '../../api/index.js' 
	export default {
		components: {
			SharePoster
		},
		data() {
			return {
				
				color: getApp().globalData.color,
				hideCat: getApp().globalData.hideCat,// 是否关闭猫咪
				days: 0,
				hours: 0,
				minutes: 0,
				seconds: 0,
				isShow: false,
				v_input: 1,
				positions: 1,
				videoIsShow: false,
				toTop: false,
				actid: '',
				pageData: '',
				imgUrl: this.imgUrl,
				
				
				
				mode: uni.getStorageSync('mode'),
				showShare: true, // 显示分享图标
				
				
				clickType: 0, // 点击的类型 1：加入购物车 2：立即购买
				carNum: '', // 购物车数量
				
				bid: uni.getStorageSync('bid'),
				showModal: false, // 是否显示模态框
				staticUrl: this.staticUrl,
				showShareQr: false, // 展示分享二維碼
				ShareQrCode: '', // 分享二維碼	
				title: uni.getStorageSync('startUp').title,
				service_state: uni.getStorageSync('startUp').service_state,// 是否开起客服系统
				fromShare:0, // 是否来自分享 1是 显示返回首页
			}
		},
		onShow() {
			clearInterval(_setInterval)
			uni.setNavigationBarTitle({
				title: this.title
			})
		},
		onLoad(e) {
			that = this
			if (e.act_id) {
				that.actid = e.act_id;
				that.getInitialData()
			}
			if (e.fromShare){that.fromShare = e.fromShare}	
		},
		onPageScroll(e) {
			if (e.scrollTop > 100) {
				this.toTop = true;
				if (this.hideCat != true) {
					this.showShare = false;
				}
			} else {
				this.toTop = false
				this.showShare = true;
			}
		},
		onShareAppMessage() {
			var vid = uni.getStorageSync("vid")
			let shareData = uni.getStorageSync('shareData');
			return {
				title: that.pageData.goods_name,
				desc:that.pageData.goods_info,
				path: '/pages/index/index?share_v_id=' + vid + '&pageType=7&act_id='+that.actid,
				imageUrl: that.imgUrl + that.pageData.goods_img
			}
		},
		methods: {
			getCart() { // 7、获取购物车数据
				let vid = uni.getStorageSync("vid");
				that.$http.post({
					url: '/zzj_singleSaleApi/cartList',
					data: {
						v_id: vid,
						bid: that.bid,
					}
				}).then(res => {
					var data = res.data;
					if (data) {
						that.carNum = data.length;
					}
				}) 
			},
			submitdoods: function() {
				var type = this.clickType;
				let vid = uni.getStorageSync("vid");
				if (type == 1) { // 加入购物车
					that.$http.post({
						url: '/zzj_singleSaleApi/joinCart',
						data: {
							v_id: vid,
							num: that.v_input,
							bid: that.bid,
							goods_id: that.pageData.goods_id,
						}
					}).then(res => {
						if (res.status) {
							uni.showToast({
								icon: "none",
								title: "在购物车等你哦",
								duration: 1500
							})
							that.getCart();
							that.isShow = false;
						} else {
							uni.showToast({
								icon: "none",
								title: res.msg,
								duration: 2000
							})
						}
					}) 
				}
				if (type == 2) { //立即购买
					uni.navigateTo({
						url: '/orderPage/order/createOrder?goods_id=' + that.pageData.goods_id + "&goods_num=" + that.v_input
					})
				}
			},
			previewimages: function(i, imgArry) {
				let imageUrls = [];
				for (let ind in imgArry) {
					imageUrls.push(this.imgUrl + imgArry[ind])
				}
				uni.previewImage({
					current: i,
					urls: imageUrls,
					indicator: "number",
					loop: true
				})
			},
			toOrderList: function(url, type) {
				var vid = uni.getStorageSync('vid');
				if (url == 'share') {
					// #ifdef MP-TOUTIAO
					return
					// #endif
					var mode = uni.getStorageSync('mode');
					if (mode != 0) { // 分销模式
						if (!vid || vid == 0) {
							that.showModal = true;
							return
						}
					}
					that.showShareQr = true;
					return
				}
				if (!vid) {
					that.showModal = true;
				} else {
					if (type == 1) {
						uni.switchTab({
							url: url
						})
						return
					}
					uni.navigateTo({
						url: url
					})
				}
			},
			contact: function() {
				var vid = uni.getStorageSync("vid")
				if (vid) {
					if(that.service_state == 1){ // 客服系统
						uni.navigateTo({
							url: "/userPage/message/consult?shop_id=" + that.pageData.store_id
						})
					}else{
						// uni.navigateTo({
						// 	url: "/userPage/onlineService/webHttp?actId=" + that.actid
						// })
						if(!that.pageData.act_service_tel){
							that.pageData.act_service_tel = uni.getStorageSync('startUp').service_tel
						}
						uni.makePhoneCall({
							phoneNumber: that.pageData.act_service_tel
						})
					}
				} else {
					that.showModal = true
				}
			},
			getInitialData: function() {//获取页面数据
				let vid = uni.getStorageSync('vid')
				that.$http.post({
					url: '/singleSaleApi/specialOfferGoods',
					data: {
						v_id: vid,
						act_id: that.actid
					}
				}).then(res => {
					if (res.status) {
						var data = res.data;
						that.pageData = data;
						if (that.pageData.show_time == 1 && that.pageData.goods_state == 1) {
							that.count_down_time(that.pageData.goods_end_time)
						}
						if (that.pageData.show_time == 1 && that.pageData.goods_state == 2) {
							that.count_down_time(that.pageData.goods_start_time)
						}
						if (data.goods_content) {
							var capture = data.goods_content;
							that.pageData.goods_content = that.$common.richTxt(capture).html;
						}
					} else {
						uni.showToast({
							icon: "none",
							title: res.msg,
							duration: 2000
						})
					}
					
				}) 
			},
			numFunc: function(e) {
				that.positions = parseInt(e.detail.current) + 1;
			},
			minus: function() {
				//減少數量
				that.v_input = parseInt(that.v_input) - 1;
			},
			plus: function() {
				//增加數量
				that.v_input = parseInt(that.v_input) + 1;
			},
			viewIsShow: function(i, state) {
				var buyState = uni.getStorageSync('buyState');
				if (buyState == 0) {
					uni.showToast({
						title: "当前用户无购买权限！",
						duration: 1500,
						icon: 'none'
					})
					return
				}
				//打開底部工具欄
				var vid = uni.getStorageSync('vid');
				if (!vid) {
					that.showModal = true;
				} else {
					if (state == 2) {
						// 活动未开始
						uni.showToast({
							icon: "none",
							title: "活动未开始哦",
							duration: 1500
						})
						return
					}
					if (state == 0) {
						// 活动已经结束
						uni.showToast({
							icon: "none",
							title: "活动已结束哦",
							duration: 1500
						})
						return
					}
					that.isShow = !that.isShow;
					that.clickType = i;
				}
			},
			count_down_time: function(start_time) {
				//倒計時方法
				var time = Number(start_time);
				_setInterval = setInterval(() => {
					if (time != 0) {
						time--;
					} else {
						clearInterval(_setInterval);
					}
					var day = Math.floor(time / 60 / 60 / 24);
					var hour = Math.floor(time / 60 / 60 % 24) < 10 ? "0" + Math.floor(time / 60 / 60 % 24) : Math.floor(time / 60 /
						60 % 24);
					var minute = Math.floor(time / 60 % 60) < 10 ? "0" + Math.floor(time / 60 % 60) : Math.floor(time / 60 % 60);
					var second = Math.floor(time % 60) < 10 ? "0" + Math.floor(time % 60) : Math.floor(time % 60);
					that.days = day;
					that.hours = hour;
					that.minutes = minute;
					that.seconds = second;
					time = Number(time);
				}, 1000)
			}	
		},
		computed:{
			...mapState(['tabTitle','color','city','navHeight','System','vid','share']),
		},
	}
</script>

<style scoped lang="scss">
	.page{
		padding-bottom: 100upx;
	}
	.footer_info,.goods_info{
		padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
	}
	.ftr_buy_info .btn3 {
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
	}
	.btnBox {
		display: flex;
		justify-content: space-between;
		height: 72upx;
	}

	.addcart {
		line-height: 72upx;
		border-radius: 36upx 0 0 36upx;
		background: #EC5B30;
	}

	/*购物车版--> .addBuy{border-radius: 0 36upx 36upx 0;background: #F2AA3B;} */
	.addBuy {
		border-radius: 36upx;
	}

	.btnBox>view {
		flex: 1;
	}

	.closeBottomBox {
		width: 20upx;
		height: 20upx;
		margin: 10upx;
	}

	.dot {
		border-radius: 22upx;
		background: red;
		padding: 0 10upx;
		font-size: 20upx;
		color: white;
		position: absolute;
		z-index: 11;
		line-height: 30upx;
		right: 0;
		top: 2upx;
	}

	.minusBottomBox {
		width: 24upx;
		height: 24upx;
		margin: 16upx;
	}

	.ftr_buy_info_goods_thumb image {
		width: 100%;
		height: 100%;
	}

	.swiper__main,
	.swiper__cell,
	.swiper__img,
	.play_video {
		width: 100%;
		height: 100%;
	}

	.goods_swiper_list {
		position: relative;
	}

	.goods_swiper_pagination {
		position: absolute;
		z-index: 9;
		right: 30rpx;
		bottom: 30rpx;
	}

	.backImg {
		width: 30upx;
		height: 30upx;
		margin: 15upx;
	}

	.cross_btn_video {
		width: 70%;
		height: 70%;
		margin: 15%;
	}

	.play_video,
	.video_time {
		position: absolute;
	}

	.video_time {
		right: 46upx;
	}
</style>
